<template>
<div class="activity" >
  <div class="activity_container" >
    
    <!-- 首页 -->
    <div class="a_index">
      <div class="a_inner">
        <img class="a_bg_1" src="./images/bg/1.png" alt="">
        <img class="a_bg_2" src="./images/bg/2.png" alt="">
        <!-- left -->
        <div class="a_index_left">
          <h1 v-text="lang.index.h1Text"></h1>
          <h2 v-text="lang.index.h2Text"></h2>
          <h5 v-text="lang.index.h5Text"></h5>
          <div class="btn_con">
            <div class="look_book_btn" v-text="lang.index.lbbText"></div>
            <div class="" v-text="lang.index.itText"></div>
          </div>
          <p v-text="lang.index.pText"></p>
          <ul class="share_con">
            <li><img src="./images/facebook.png" alt="facebook"></li>
            <li><img src="./images/twitter.png" alt="twitter"></li>
            <li><img src="./images/telegram.png" alt="telegram"></li>
            <li><img src="./images/weibo.png" alt="weibo"></li>
          </ul>
        </div>
        <!-- right -->
        <div class="a_index_right" v-if="isShowRight">
          <div class="right_inner">
            <h3 
              v-text="h3Text" 
              :class="{marginB70: !status}"
            ></h3>
            <h6 v-if="status" v-text="h6Text"></h6>
            <!-- <div class="air_times">
              <div>
                <span>30</span>
                <label >DAYS</label>
              </div>
              <div>
                <span>12</span>
                <label >HOURS</label>
              </div>
              <div>
                <span>45</span>
                <label >MINS</label>
              </div>
              <div class="no_mar">
                <span>08</span>
                <label >SECS</label>
              </div>
            </div> -->
            <!-- 倒计时组件 -->
            <count-down 
              :startTime="startTime"
              :endTime="endTime"
              :status="status"
              @timeDown="resetTimeDownFun"
              ref="countDown"
            ></count-down>

            <div class="air_oval" >
              <!-- 准备开售 -->
              <div 
                class="air_oval_ready"
                v-if="status===0"
              >
                <div
                  class="air_oval_inner"
                  v-for="(item, index) in airOvalReadyList" 
                  :key="index"
                >
                  <span><img :src="imgList[index].imgUrl" alt=""></span>
                  <i v-text="item.iReadyText"></i>
                  <label v-text="item.labelReadyText"></label>
                </div>
              </div>
              <!-- 开始中 -->
              <div 
                class="air_oval_start"
                v-if="status===1"
              >
                <div
                  class="air_oval_inner"
                  v-for="(item, index) in airOvalReadyList" 
                  :key="index"
                >
                  <i v-if="index == 0" v-text="item.iStartText + lang.index.otherDays"></i>
                  <i v-else-if="index == 1" v-text="nowDays + lang.index.otherDays"></i>
                  <i v-else v-text="item.sumDay + lang.index.otherDays"></i>
                  <label v-if="index === 1" v-text="item.labelStartText"></label>
                </div>
                <div 
                  class="start_progress" 
                  v-text="progress+'%'"
                  :style="{width: progress+'%'}"
                ></div>
                <h4 v-text="h4Text"></h4>
                <!-- <h4>第{{turnNum}}轮</h4> -->
                
              </div>
              <!-- 售罄 -->
              <div class="air_oval_end" v-if="status===2">
                <div 
                  class="start_progress" 
                  v-text="progress+'%'"
                  :style="{width: progress+'%'}"
                ></div>
                <div class="aDivEnd" v-text="lang.index.divEndTxt"></div>
              </div>
            </div>
            <div 
              class="air_btn"
              :class="{
                air_btn_disabled: status !== 1,
                air_btn_active: status === 1
              }"
              v-text="btnJionText"
              @click="aJionFun"
            ></div>
          </div>
        </div>
      </div>
      
    </div>

    <!-- 什么是IDC Token (IT) -->
    <awit :lang="lang.awit" :langKey="langKey"></awit>
    <!-- IDC Token -->
    <ait :lang="lang.ait" :langKey="langKey"></ait>
    <!-- IDC Token (IT)代币用途 -->
    <aituse :lang="lang.aituse" :langKey="langKey"></aituse>
    <!-- 发展历程 -->
    <ahistory :lang="lang.ahistory" :langKey="langKey"></ahistory>
    <!-- 团队介绍 -->
    <ateam :lang="lang.ateam" :langKey="langKey"></ateam>
    <!-- 战略合作伙伴 -->
    <apartner :lang="lang.apartner" :langKey="langKey"></apartner>
  </div>

  <!-- 侧边导航 -->
  <div class="activity_sidebar" v-show="isShowSb">
    <ul>
      <li 
        v-for="(item, index) in sidebarList" 
        :key="index"
        @click="goToAnchorsFun(item.className, index)"
        
      ><div></div></li>
      <div :style="`top: ${sbTop}px`" class="activity_sidebar_active"></div>
    </ul>
  </div>

  <!-- 侧边引导操作 -->
  <div class="activity_guide" v-show="isShowSb && isBackTop">
    <div class="activity_guide_one" @click="guideOneFun"></div>
    <div class="activity_guide_two"  @click="guideTwoFun"></div>
  </div>
</div>
</template>

<script>
import awit from './components/awit'
import ait from './components/ait'
import aituse from './components/aituse'
import ahistory from './components/ahistory'
import ateam from './components/ateam'
import apartner from './components/apartner'
import countDown from './components/countDown'

import commonFilter from '@/filters/common.js'

export default {
  components:{
    awit,
    ait,
    aituse,
    ahistory,
    ateam,
    apartner,
    countDown
  },
  props: {
    isShowMsg: {
      type: Boolean,
      default: true
    },
    lang: {
      type: Object,
    },
    langKey: String,
  },

  data () {
    return {
      isRequest: false,
      isShowRight: false,

      // 0 准备 1 进行中 2结束
      status: 0,

      startTime: 0,
      endTime: 0,

      // isShowMsg: true,
      isShowSb: false,
      isBackTop: false,
      sbTop: 0,
      progress: '50',
      turnNum: 0,
      totalDays: '',
      nowDays: 0,
      dataTime: {

      },

      "h6TextEnd": "xxx IT xxx天 售罄",
      
      airOvalReadyList: [],
      // "airOvalReadyList": [
      //   {
      //     "iReadyText": "1-10天",
      //     "labelReadyText": "1ETH = 4,000 IT",
      //     "iStartText": "1天",
      //     "labelStartText": "0IT"
      //   },
      //   {
      //     "iReadyText": "11-20天",
      //     "labelReadyText": "1ETH = 3,000 IT",
      //     "iStartText": "5天",
      //     "labelStartText": "1,500,000IT"
      //   },
      //   {
      //     "iReadyText": "21-30天",
      //     "labelReadyText": "1ETH = 2,000 IT",
      //     "iStartText": "10天",
      //     "labelStartText": "1,500,000IT"
      //   }
      // ],

      imgList: [
        { imgUrl: require("./images/r1.png") },
        { imgUrl: require("./images/r2.png") },
        { imgUrl: require("./images/r3.png") },
      ],

      //侧边栏导航
      sidebarList: [
        { className: 'a_index', isActive: true, },
        { className: 'awit', isActive: false, },
        { className: 'ait', isActive: false, },
        { className: 'aituse', isActive: false, },
        { className: 'ahistory', isActive: false, },
        { className: 'ateam', isActive: false, },
        { className: 'apartner', isActive: false, },
      ],

      // isHeader: false,
    }
  },
  computed: {
    btnJionText(){
      return this.status
        ? (this.status === 1 ? this.lang.index.btnJionStart : this.lang.index.btnJionEnd) 
        : this.lang.index.btnJionReady
    },
    h3Text(){
      return this.status
        ? (this.status === 1 ? this.lang.index.h3TextStart : this.lang.index.h3TextEnd) 
        : this.lang.index.h3TextReady
    },
    h4Text(){
      let text = {
        1: this.lang.index.oneTurnNum,
        2: this.lang.index.twoTurnNum,
        3: this.lang.index.threeTurnNum,
      }
      return text[this.turnNum]
    },
    h6Text(){
      return (this.status === 1 ? this.lang.index.h6TextStart : this.lang.index.h6TextEnd) 
    },
  },
  watch: {
    status(newStatus, oldStatus) {
      console.log('newStatus', newStatus);
      console.log('oldStatus', oldStatus);
      // this.resetTimeDownFun(newStatus)
    }
  },
  created(){
    this.GetConfiguration()
  },
  mounted () {
    
    // 初始化
    this.onResizeFun()
    this.onScroll()

    // 当屏幕宽度小于承载的区域隐藏
    window.onresize = this.onResizeFun
    
    this.$nextTick(()=> {
      window.addEventListener('scroll', this.onScroll)
    })
  },
  methods: {
    /**
     * 倒计时状态 只能单向传递
     * 0(预开始) -> 1(进行中) -> 2(结束)
     */
    resetTimeDownFun(status){
      
      let resetFun = {
        0: ()=>{
          this.isShowRight = false
          console.log(status, '活动预热中');
          this.GetConfiguration()
        },
        1: ()=>{
          this.isShowRight = false
          console.log(status, '活动进行中');
          this.GetConfiguration()
        },
        2: ()=>{
          console.log(status, '活动已结束');
          // this.GetConfiguration()
          // this.status = status
        }
      }
      resetFun[status]()
      // this.GetConfiguration()
    },
    // 组装数据
    _assembleDataFun(res){
      // 模拟数据
      //  res.StartTime = '2018-08-18 2:08:00'
      //  res.Data[0].Start = res.StartTime
      //  res.Data[0].End = '2018-08-19 19:32:00'
      //  res.Data[1].Start = '2018-08-19 09:32:00'
      //  res.Data[1].End = '2018-08-25 23:59:59'
      //  res.Data[2].Start = '2018-08-26 00:00:00'
       res.Data[2].End = '2018-08-28 23:59:59'

      let airOvalReadyList = []
      let stringTime = res.StartTime.replace(/-/g,"/") //ios兼容处理
      
      let nowTimeStamp = (new Date()).getTime()
      let startTime = (new Date(stringTime))

      let monthTime = (startTime.getMonth()) + 1
      let dayTime = startTime.getDate()
      let startTimeStampAct = startTime.getTime()
      let localeDateStringTime = startTime.toLocaleDateString(); ////获取当前日期


      // 时间判断状态
      // 一共几轮
      let length = res.Data.length
      let initDay = 0 //初始化天数
      for (let index = 0; index < length; index++) {
        const el = res.Data[index];

        this._formatNum(el.Rate)
        let Start = (new Date(el.Start)).getTime()
        let End = (new Date(el.End)).getTime() + 1000
        let Day =  parseInt((End - Start) / (60 * 60 * 1000)/24)
        let initStartDay = initDay
        initDay =(Day + initDay)
        console.log(initDay);
        
        //组装展示数据
        airOvalReadyList[index] = {
          iReadyText: `${ (initStartDay ? (initStartDay+1 +'-') : '1-')}${initDay ? initDay : initDay+1} ${this.days} `,
          labelReadyText: `1${el.Coin} = ${this._formatNum(el.Rate)} ${el.ToCoin}`,
          iStartText: `${Day}`,
          labelStartText: "0IT",
          sumDay: initDay ? initDay : initDay+1,
        }

        // 当前属于第几轮
        let startStrTime = el.Start.replace(/-/g,"/")
        let endStrTime = el.End.replace(/-/g,"/")
        let startTimeStamp = (new Date(startStrTime)).getTime()
        let endTimeStamp = (new Date(endStrTime)).getTime()

        if( (startTimeStamp < nowTimeStamp) && (endTimeStamp > nowTimeStamp) ){
          console.log('现在是第:'+ (index + 1) + '轮');
          
          /**
           * 获取销售中数据
           */
          this.GetCrowdInfo((index + 1))
          // 时间比例换算   防止溢出
          // let progress = Math.round((parseFloat(((nowTimeStamp - startTimeStamp) / (endTimeStamp - startTimeStamp))) * 100))
          let progress = Math.round((parseFloat(((nowTimeStamp - startTimeStamp) / (endTimeStamp - startTimeStamp))) * 100)*100)/100
          this.progress = progress >= 100 ? 100 : progress
          let nowTimeS = nowTimeStamp - startTimeStamp
          console.log(nowTimeS);
          
          let nowDays = parseInt(nowTimeS/(1000*60*60*24))
          this.nowDays = nowDays ? nowDays : 1
          // 开始时间 结束时间
          this.startTime = nowTimeStamp
          this.endTime = endTimeStamp
        }
        
        /**
         * 最终结束时间 算出进度条
         * 没有触发第二个请求 检验是否活动过期
         * 活动已经过期
         */
        if((index === (length-1)) && !this.status){
          if((endTimeStamp - nowTimeStamp) < 0){
            console.log('循环中活动已结束');
            
            this.GetCrowdEndInfo()
          }else{
            /**
             * 活动还没开始
             * 
             */
            this._notStarted(monthTime, dayTime)
            // 开始时间 结束时间
            this.startTime = nowTimeStamp
            this.endTime = startTimeStampAct
          }
          
          // 记录时间
          this.dataTime = {
            startStrTime,
            endStrTime,
          }
        }
      }
      this.airOvalReadyList = airOvalReadyList
      
    },

    // 活动未结束逻辑处理
    _notStarted(month, day){
      this.lang.index.h3TextReady = this.lang.index.h3TextReady.replace('{month}', month)
      this.lang.index.h3TextReady = this.lang.index.h3TextReady.replace('{day}', day)
      this.status = 0
      this.isShowRight = true
    },

    /**
     * 首页-获取IT配置信息
     * 
     */
    GetConfiguration(){
      this.$host4.post('IT/GetConfiguration', {}, {
        // isQueryString: true
      })
      .then((res) => {
        if (res.StatusCode === '200') {
          this._assembleDataFun(res)
          
        }
      })
    },

    /**
     * 首页-IT令牌销售中信息
     * 进行中的数据 只能组装到 labelStartText 数据
     */
    GetCrowdInfo(num){
      
      this.turnNum = num
      this.status = 1

      this.$host4.post('IT/GetCrowdInfo', {}, {
        // isQueryString: true
      })
      .then((res) => {
        
        // 显示左侧倒计时
        this.isShowRight = true
        if (res.StatusCode === '200') {
          
          let length = res.Data.length
          for (let index = 0; index < length; index++) {
            const el = res.Data[index];
            this.airOvalReadyList[index].labelStartText = `${this._formatNum(el.CurrentAmount)} ${el.ToCoin}`
          }
         
        }
        
      })
    },
    // 首页-获取众筹结束数据
    GetCrowdEndInfo(){
      this.status = 2
      
      this.$host4.post('IT/GetCrowdEndInfo', {}, {
        // isQueryString: true
      })
      .then((res) => {
        if (res.StatusCode === '200') {
          this.isShowRight = true
          let text = this.lang.index.h6TextEnd
          text = text.replace('{Amount}', res.Amount)
          text = text.replace('{Coin}', res.Coin)
          text = text.replace('{Days}', res.Days)
          this.lang.index.h6TextEnd = `${text}`
          this.progress = 100
        }
      })
    },
    // 首页-查询购买列表
    GetCrowdList(){
      this.$host4.post('IT/GetCrowdEndInfo', {}, {
        // isQueryString: true
      })
      .then((res) => {
        if (res.StatusCode === '200') {
        }
      })
    },

    closeMsgFun(){
      this.$emit('closeMsgFun', false)
    },
    onResizeFun(){
      (document.documentElement.clientWidth || document.body.clientWidth) < 1666
        ? this.isShowSb = false
        : this.isShowSb = true
    },
    goToAnchorsFun(className, index){
      // 移动屏幕
      let h = this._getHeight(className)
      console.log(h);
      document.documentElement.scrollTop = h.toString()

      this._setSbTopFun(index)
    },
    guideOneFun(){
      console.log('点击了飞机')
    },
    guideTwoFun(){
      document.documentElement.scrollTop = 0
    },

    // 滚动事件
    onScroll(){
      let scrolled = document.documentElement.scrollTop || document.body.scrollTop
      let one = this._getHeight('a_index')
      let two = this._getHeight('awit')
      let three = this._getHeight('ait')
      let four = this._getHeight('aituse')
      let five = this._getHeight('ahistory')
      let six = this._getHeight('ateam')
      let seven = this._getHeight('apartner')
      console.log('执行滚动')
      if(scrolled < two){
        this._setSbTopFun(0)
        this.isBackTop = false
      }else if(scrolled > two && scrolled < three){
        this._setSbTopFun(1)
        this.isBackTop = true
      }else if(scrolled > three && scrolled < four){
        this._setSbTopFun(2)
        this.isBackTop = true
      }else if(scrolled > four && scrolled < five){
        this._setSbTopFun(3)
        this.isBackTop = true
      }else if(scrolled > five && scrolled < six){
        this._setSbTopFun(4)
        this.isBackTop = true
      }else if(scrolled > six && scrolled < seven){
        this._setSbTopFun(5)
        this.isBackTop = true
      }else if(scrolled > seven){
        this._setSbTopFun(6)
        this.isBackTop = true
      }
    },
    aJionFun(){
      this.GetConfiguration()
      // if(this.status){
      //   this.$router.push({
      //     path: "/activity/subscription"
      //   })
      // }
    },

    //改变侧边栏激活位置
    _setSbTopFun(index){
      this.sbTop = index ? index * 63 : 0
    },

    // 获取锚点高度
    _getHeight(className){
      return document.getElementsByClassName(className)[0].offsetTop - 140
    },

    _formatNum (val) {
      return commonFilter.fillDecimal(commonFilter.currency(val, '', '', 0), 0)
    },
  },
  
}
</script>

<style lang="stylus">

.activity 
  position: relative
  background-position: left top
  background-repeat: no-repeat
  background-image: linear-gradient(180deg, #304599 2%, #0E1740 100%)
  background-size: 100% 100%
  .activity_container
    transition: all 0.4s
  .a_inner
    position: relative
    width: 1200px
    margin: 0 auto
    text-align: center
    color: #ffffff
    &>img
      position: absolute
    .a_inner_top
      .a_inner_top_title
        // width: 431px
        display inline-block
        padding 0 18px
        margin: 0 auto 20px
        position: relative
        h1
          position: relative
          z-index: 1
          font-size: 40px
          line-height: 60px
          color: #E9ECF3
        &::after
          content: ''
          position: absolute
          left: 0
          bottom: 0
          // display: block
          // float: left
          width: 100%
          height: 24px
          background:  rgba(50,104,240,0.29)
          border-radius: 4px
      h4
        margin-bottom: 14px
        line-height: 36px
        font-size: 24px
        span
          vertical-align: middle
          margin: 0 10px
          line-height: 59px
          font-size: 40px
          color: #FFCE07		
      h3
        line-height: 27px
        text-align: left
        font-size: 18px
        color: #E9ECF3
      h5
        line-height: 24px
        font-size: 16px
        color: #E9ECF3
  .a_index
    padding-top: 230px
    padding-bottom: 192px
    background-repeat: no-repeat
    background-position: center top
    // background-image: url(./images/bg1.png)
    background-size: auto 1010px
    .a_inner
      height: 588px
      .a_bg_1
        top: -177px 
        right: -272px
      .a_bg_2
        top: 150px
        left: 19px
      .a_index_left
        position: relative
        z-index: 1
        float: left
        text-align: left
        h1
          position: relative
          padding-top: 60px
          margin-bottom: 16px
          font-size: 60px
          line-height: 73px
          font-weight: bold
          background: linear-gradient(to right, #87FCFC, #607EF6)
          -webkit-background-clip: text
          color: transparent
          &:after
            content: ''
            position: absolute
            left: 0
            bottom: -4px
            width: 387px
            height: 2px
            background-image: linear-gradient(121deg, #87FCFC 0%, #607EF6 100%)
        h2
          max-width: 580px
          margin-bottom: 20px
          line-height: 74px
          font-size: 50px
          color: #fff
        h5
          margin-bottom: 47px
          line-height: 33px
          font-size: 24px
          color: #FFFFFF
        .btn_con
          height: 42px
          margin-bottom: 123px
          &>div
            float: left
            width: 200px
            height: 42px
            margin-right: 20px
            text-align: center
            font-size: 14px
            line-height: 42px
            background-image: linear-gradient(90deg, rgba(5,245,255,0.98) 0%, #295DFE 100%)
            border-radius: 42px
            color: #fff
            transition: all .4s
            cursor: pointer
            &:hover
              background-color: #4CDAFF
              background-image: linear-gradient(90deg, #4CDAFF, #4CDAFF)
              box-shadow: 0 2px 7px 0 rgba(12,22,62,0.47)
        p
          margin-bottom: 20px
          line-height: 24px
          font-size: 16px
          font-weight: normal
          color: #FFFFFF
        .share_con
          height: 46px
          overflow: hidden
          &>li
            float: left
            margin-right: 30px
            img
              width: 46px
      .a_index_right
        position: relative
        z-index: 1
        float:right
        text-align: center
        background-image: linear-gradient(130deg, #4BCBF5 0%, #7D25E6 100%)
        border: 1px solid #4BCBF5
        // border-image: linear-gradient(#459CFF,#4BE8FF) 30 30
        border-radius: 32px
        .right_inner
          height: 588px
          width: 601px
          background: url(./images/countdown.svg) no-repeat center 50px
          background-size: 357px 68px
          h3
            margin-bottom: 10px
            padding-top: 66px
            line-height: 54px
            font-size: 36px
            color: #fff
            &.marginB70
              margin-bottom 70px
          h6 
            margin-bottom 31px
            line-height: 29px
            font-size: 20px
            color: #FFFFFF
          .air_oval
            position: relative
            width: 467px
            height: 25px
            margin: 0 auto 87px
            background: rgba(14,12,71,0.45)
            border-radius: 19px
            .air_oval_ready, .air_oval_start
              &>div.air_oval_inner
                position:absolute
                left: 0
                top: 0
                width: 100px
                height: 60px
                transform:translate(-35px, -6px)
                color: #fff
                &:nth-child(2)
                  left: 50%
                  span
                    background-image: linear-gradient(180deg, #0096FC 0%, #0C2FFA 100%)
                &:nth-child(3)
                  left: 100%
                  transform:translate(-55px, -6px)
                  span
                    background-image: linear-gradient(180deg, #9642FA 0%, #4719D4 100%)
                span
                  font-size: 0
                  display: inline-block
                  width: 38px
                  height: 38px
                  margin: 0 10px 19px
                  font-size: 12px
                  background-image: linear-gradient(180deg, #05EFFA 0%, #2860FE 100%)
                  box-shadow: -4px 0 6px 0 rgba(8,75,199,0.40)
                  border-radius: 50%
                  img
                    width: 100%
                i 
                  display: inline-block
                  min-width 50px
                  margin-bottom 10px
                  line-height: 17px
                  font-size: 12px;
                label
                  display: inline-block
                  line-height: 17px
                  font-size: 12px
            .air_oval_start
              &>div.air_oval_inner
                padding-top 38px
                &:nth-child(3)
                  left: 90%
                  text-align right 
                i 
                  width: 100px
              h4 
                position absolute
                left 0
                top -40px
                width 100%
                line-height 30px
                font-size: 20px
                color #fff
            .air_oval_end
              .aDivEnd
                line-height 110px
                font-size: 14px
                color: #FFFFFF
            .start_progress
              position absolute
              left 0
              top 0
              width 50px
              height: 25px
              line-height 25px
              border-radius: 19px
              font-size: 14px
              background  #00DCFF
              color #fff
          .air_btn
            height: 60px
            width: 286px
            margin: 0 auto
            line-height: 60px
            font-size: 22px
            background: #375396
            border-radius: 30px
            transition: all 0.4s
            cursor: pointer
            &.air_btn_active
              background-image: linear-gradient(130deg, rgba(62,57,255,0.98) 0%, #3466FF 100%)
              color: #fff
              &:hover
                background: #4CDAFF
                box-shadow: 0 2px 11px 0 rgba(12,57,73,0.41)
                color: #fff
            &.air_btn_disabled
              color: rgba(255,255,255,0.5)
  .activity_sidebar
    position: fixed
    left: 10%
    top: 260px
    z-index: 999
    height: 398px
    width: 42px
    // background-color: red
    &>ul
      position: relative
      padding-left: 1px
      &::after
        content: ''
        position: absolute
        top: 20px
        left: 50%
        width: 1px
        height: 370px
        background: #1993C4
      &>li
        cursor: pointer
        // margin-bottom: 40px
        padding: 20px 10px
        &>div
          width: 20px
          height: 20px
          border-radius: 50%
          background: #1993C4
      .activity_sidebar_active
        position: absolute
        top: 0px
        left: 0
        z-index: 5
        width: 42px
        height: 42px
        border-radius: 50%
        background: #1993C4
        transition: all 0.4s
        &:after
          content: ''
          position: absolute
          top: 50%
          left: 50%
          width: 26px
          height: 26px
          border-radius: 50%
          background: #0FEAFF
          transform: translate(-50%, -50%)
  .activity_guide
    position: fixed
    right: 10%
    bottom: 60px
    z-index: 999
    &>div
      height: 60px
      width: 60px
      margin-bottom 20px
      background red
      cursor pointer
    .activity_guide_one
      background url(./images/guide_one_d.png) no-repeat center center 
      background-size 100% 100% 
      &:hover 
        background-image url(./images/guide_one_h.png)
    .activity_guide_two
      background url(./images/guide_two_d.png) no-repeat center center 
      background-size 100% 100% 
      &:hover 
        background-image url(./images/guide_two_h.png)

</style>
